<template>
    <div>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand">ZX图书馆系统</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">

                        <router-link tag="li" to="/home/main">
                            <a>首页</a>
                        </router-link>
                        <router-link tag="li" to="/home/user">
                            <a>用户管理</a>
                        </router-link>
                        <router-link tag="li" to="/home/book">
                            <a>图书馆里</a>
                        </router-link>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li @click="logOutClick">
                            <a>退出登录</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
</template>


<script>
export default {
    data(){
        return {

        }
    },
    methods: {
        logOutClick(){
            this.$router.push('/login');
            localStorage.removeItem('user');
        }
    }
}
</script>



<style>
    .router-link-active {
        color: #555;
        background-color: #e7e7e7
    }
</style>
